<template>
  <div class="v-loading">
    <img :src="imgUrl" alt="" />
    <!-- <div class="loader-div">
      <div v-for="n in 5" :key="n" class="dot"></div>
    </div> -->
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue'
export default {
  setup() {
    const state = reactive({
      imgUrl: import.meta.env.VITE_APP_PATH + 'images/white.gif'
    })

    return {
      ...toRefs(state)
    }
  }
}
</script>

<style lang="scss" scoped>
.v-loading {
  position: fixed;
  top: 0px;
  left: 0px;
  height: 100vh;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;

  img {
    width: 200px;
  }

  // .loader-div {
  //   position: fixed;
  //   top: 50%;
  //   left: 40%;
  //   margin-left: 10%;
  //   transform: translate3d(-50%, -50%, 0);

  //   .dot {
  //     width: 24px;
  //     height: 24px;
  //     background-color: #33aacc;
  //     border-radius: 100%;
  //     display: inline-block;
  //     animation: slide 1s infinite;
  //   }
  //   .dot:nth-child(1) {
  //     animation-delay: 0.1s;
  //     background: #32aacc;
  //   }
  //   .dot:nth-child(2) {
  //     animation-delay: 0.2s;
  //     background: #64aacc;
  //   }
  //   .dot:nth-child(3) {
  //     animation-delay: 0.3s;
  //     background: #96aacc;
  //   }
  //   .dot:nth-child(4) {
  //     animation-delay: 0.4s;
  //     background: #c8aacc;
  //   }
  //   .dot:nth-child(5) {
  //     animation-delay: 0.5s;
  //     background: #faaacc;
  //   }
  // }
  // @keyframes slide {
  //   0% {
  //     transform: scale(1);
  //   }
  //   50% {
  //     opacity: 0.5;
  //     transform: scale(2);
  //   }
  //   100% {
  //     transform: scale(1);
  //   }
  // }
}
</style>
